<template>
	<view>
		<view class="modal"  @click="closePopup">
			<view class="datePopup" @click.stop >
				<view class="popup-title">Choose Date</view>
				<view class="picker-wrap" >
					<uni-calendar class="my-uni-calendar" :date="date" :end-date="endDate"  :showMonth="false" @change="confirm" />
				</view>
				<view class="btn-wrap" @click.stop  >
					<button @click.stop="handleChoose" size="default" type="default"
						style="width:90%;color:#ffffff;background-image: linear-gradient(90deg, #FF6623 17%, #F22E40 91%);border-radius:30px;"
						hover-class="is-hover">Confirm</button>
				</view>
			</view>
		</view>  
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { parseTime } from '@/utils/common.js'
	const single = ref('');
	import { onLoad } from '@dcloudio/uni-app';
	const closePopup = ()=>{
		uni.navigateBack({
				delta: 1
		})
	}
	
	const endDate = ref(parseTime(new Date().getTime(),'{y}-{m}-{d}'));
	const date = ref(parseTime(new Date().getTime(),'{y}-{m}-{d}'));
	const handleChoose = ()=>{
		const pages = getCurrentPages();
		const prevPage = pages[pages.length - 2];

		prevPage.$vm.date = date;
		// prevPage.setData({
		//   // 你需要传递的数据
		//   date: 'your data'
		// });
		uni.navigateBack();
	}
	
	const confirm = (e)=>{
		console.log(e)
		date.value = e.fulldate;
	}
	
	onLoad(option=>{
		console.log(option)
		if(option.date){
			console.log(option.date)
			date.value = option.date;
		}
	})
	
	

	
</script>

<style>

	page{
		background: transparent;
		width: 100%;
		height: 100%;
		/* background: rgba(0, 0, 0, 0.4); */
	}
	.uni-calendar-item--isDay,.uni-calendar-item--checked{
		background-color: #F53B39 !important;  /* 选中日期的背景颜色 */
	}
	.uni-calendar-item--isDay-text{
		/* color: #F53B39 !important; */
	}
	
</style>

<style lang="scss" scoped>
 .modal {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

.datePopup{
	position: fixed;
	width: 100%;
	height: 1200rpx;
	background-color: #fff;
	bottom: 0;
	left: 0;
	.popup-title{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #222;
		font-size: 30rpx;
	}
	.btn-wrap{
		margin-top: 50rpx;
	}
}

</style>